<template>
  <div class="NotFinishWorkList" runat="server">
    <el-container>
      <el-aside width="150px">
      </el-aside>
      <el-main>
        <span class="demonstration"><i>手动分配</i></span>
        <el-divider></el-divider>
        <el-table :data="workArr">
          <el-table-column type="index" label="编号"
                           width="50"></el-table-column>
          <el-table-column label="任务名" prop="workName" width="100"></el-table-column>
          <el-table-column label="任务信息" prop="workInfo" width="150"></el-table-column>
          <el-table-column label="志愿者" prop="volunteerId" width="100"></el-table-column>
          <el-table-column label="任务地点" prop="workAddress" width="100"></el-table-column>
          <el-table-column label="是否完成" prop="isFinish" width="100">
            <template scope="workArr">
              <el-tag :type="workArr.row.isFinish === 0 ? 'danger' : 'success'">
                {{ workArr.row.isFinish == 0 ? '未完成' : '完成' }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="手动分配任务" width="150">
            <template slot-scope="scope1">
              <el-select v-model="value[scope1.$index]" placeholder="请选择" clearable>
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.userName"
                    :value="item.userId">
                </el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column label="操作" fixed="right">
            <!--scope代表每行对应的数据里面的index属性代表下标,
            里面的row代表每行对应的数组中的对象-->
            <template slot-scope="scope2">
              <!--confirm确认事件-->
              <el-popconfirm @confirm="workGive(scope2.$index)"
                             title="确定分配该任务吗?">
                <el-button size="mini"
                           type="success" slot="reference">分配
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
          <!--*******************************-->
        </el-table>

      </el-main>
    </el-container>
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="total" align="center">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {setToken} from "@/utils/Token";
import {NotFinishWorkList, WorkUser, GiveWork, VolunteerList} from "@/api/admin_api";

export default {
  name: "give-work",
  data() {
    return {
      options: [
        {}
      ],
      value: [],
      workArr: [],
      page: 1,
      userId: '',
      volunteerId: '',
      workId: '',
    }
  },
  created() {
   // setToken('token', 'eyJjdHkiOiJIUzI1NiIsInR5cCI6IkpXVCIsImFsZyI6IkhTMjU2In0.eyJuZXRJZCI6MSwiaWRlbnRpdHkiOjIsIm5ldFBhc3N3b3JkIjoiJDJhJDEwJHpvaW9Sc085WjBDL1g0b1JHSmxRSC5weTlQeGdXUDF1SEtrWEQ2OTF2UHJaQVM4LnBDb0NtIiwiY29tbXVuaXR5SWQiOjEsImV4cCI6MTY2NDM0NjAwNCwiYWNjb3VudCI6IjExMTFAcXEuY29tIn0.Zao1ELbFHJlhkmPgRjYIAATwPZPDNc1uyI0y-SSn3vI\n')
    NotFinishWorkList(this.page).then((res) => {
      this.workArr = res.data.data.list;
      this.total = res.data.data.total;
      for (let i = 0; i < this.workArr.length; i++) {
        this.volunteerId = this.workArr[i].volunteerId;
        WorkUser(this.volunteerId).then((res) => {
          this.workArr[i].volunteerId = res.data.data.userName;
        });
      }
    });
    VolunteerList().then((res) => {
          this.options = res.data.data;
        }
    )
  },
  methods: {
    //分页的方法
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val
      NotFinishWorkList(this.page).then((res) => {
        this.workArr = res.data.data.list;
        this.total = res.data.data.total;
        for (let i = 0; i < this.workArr.length; i++) {
          this.volunteerId = this.workArr[i].volunteerId;
          WorkUser(this.volunteerId).then((res) => {
            this.workArr[i].volunteerId = res.data.data.userName;
          });
        }
      })
    },
    workGive(index) {
      this.workId = this.workArr[index].workId;
      this.volunteerId = this.value[index];
      GiveWork(this.workId, this.volunteerId).then(() => {
      });
      this.workArr[index].volunteerId = this.value[index];
      this.volunteerId = this.workArr[index].volunteerId;
      WorkUser(this.volunteerId).then((res) => {
        this.workArr[index].volunteerId = res.data.data.userName;
      });
      this.$message({
        message: '分配任务成功！',
        type: 'success'
      });
    },
  }
}
</script>

<style scoped>

</style>